<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单列表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <table id="ordersTable" style="width: 100%">
        <thead>
        <tr>
            <th>订单名称</th>
            <th>订单编号</th>
            <th>支付宝订单号</th>
            <th>总价格</th>
            <th>创建时间</th>
            <th>支付时间</th>
            <th>订单状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 订单数据将通过 JavaScript 动态插入 -->
        </tbody>
    </table>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var app = {
            tableData: [],
            load: function() {
                axios.get('/api/orders')
                    .then(response => {
                        this.tableData = response.data;
                        this.renderTable();
                    })
                    .catch(error => {
                        console.error('Error fetching orders:', error);
                        alert('加载订单失败');
                    });
            },
            renderTable: function() {
                var tableBody = document.querySelector('#ordersTable tbody');
                tableBody.innerHTML = ''; // 清空现有的表格数据

                this.tableData.forEach(function(row) {
                    var rowHtml = `
                        <tr>
                            <td>${row.subject}</td>
                            <td>${row.orderID}</td>
                            <td>${row.alipayNo || '未支付'}</td>
                            <td>${row.totalAmount}</td>
                            <td>${row.createTime}</td>
                            <td>${row.payTime || '未支付'}</td>
                            <td>${row.status}</td>
                            <td>
                                <button onclick="pay('${row.orderID}', '${encodeURIComponent(row.subject)}', '${encodeURIComponent(row.totalAmount)}')">支付</button>
                            </td>
                        </tr>
                    `;
                    tableBody.insertAdjacentHTML('beforeend', rowHtml);
                });
            }
        };

        app.load(); // 加载订单数据

        window.pay = function(orderId, subject, totalAmount) {
            // 发送请求到后端以获取支付表单
            axios.get(`/api/alipay/pay?subject=${subject}&traceNo=${orderId}&totalAmount=${totalAmount}`)
                .then(response => {
                    // 打开支付宝支付页面
                    var payWindow = window.open('', '_blank');
                    payWindow.document.write(response.data); // 将返回的表单写入新窗口
                    payWindow.document.close(); // 关闭文档以完成加载
                })
                .catch(error => {
                    console.error('支付请求失败:', error);
                    alert('支付请求失败');
                });
        };
    });
    // 检查订单状态的函数
    function checkOrderStatus(orderId) {
        axios.get(`/api/orders/${orderId}`)
            .then(response => {
                var orders = response.data;
                if (orders.state === "已支付") {
                    alert("支付成功");
                    // 在页面上更新订单状态
                    document.querySelector(`#order-${orderId} .status`).textContent = "已支付";
                } else {
                    // 每 5 秒检查一次
                    setTimeout(() => {
                        checkOrderStatus(orderId);
                    }, 5000);
                }
            })
            .catch(error => {
                console.error('检查订单状态失败:', error);
            });
    }

    // 在页面加载后，为每个订单设置检查状态的轮询
    document.querySelectorAll('button.pay').forEach(function(button) {
        var orderid = button.getAttribute('data-order-id');
        checkOrderStatus(orderid);
    });
</script>
</body>
</html>